<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name='format-detection' content='telephone=no' />
    <title>人车人</title><link rel="icon" href="/assets/img/titleico.ico" type="image/x-icon">
    <link rel="stylesheet" href="/assets/css/common.css" />
    <link rel="stylesheet" href="/assets/css/iconfont/iconfont.css" />
    <style>
    	body{background-color: #fff;}
    	section{background-color: #fff;padding-bottom: 6rem;}
    	section .container p.title{padding: .4rem 2rem;background-color: #eaeaea;}
    	section .container .list li label{padding: 0 5%;height: 4.4rem;-webkit-align-items: center;align-items: center;}
    	section .container .list li label input[type=text],section .container .list li label input[type=tel]{color: #a7a7a7;height: 4.4rem;font-size: 1.6rem;}
    	section .container .list li label p{height: 3.8rem;line-height: 3.8rem;}
    	section .container a.submit{position: relative;display: block;height: 3.6rem;line-height: 3.6rem;width: 90%;text-align: center;margin: 3% auto;border-radius: 6px;background-color: #5cb85c;color: #fff;}
        section .container a.fail{background-color: #5cb85c ;}
        section .container a.submit:active{background-color: #59ab59;}
		section .container .list li label span{font-size: 1.5rem;padding: 0;padding-right: .8rem;}
		section .container .list li li label select{font-size: 1.6rem;}
		section .container a.nextpage,section .container a.subbtn{display: block;padding: 3% 0;width: 90%;text-align: center;margin: 3% auto;border-radius: 6px;background-color: #5cb85c;color: #fff;}
		section .container a.fail{background-color: #5cb85c ;}
		section .container a.nextpage,section .container a.subbtn:active{background-color: #59ab59;}
		
		
		section .container .list li .icon{padding: 4px;border-radius: 6px;margin-right: 5%;}
		section .container .list li .icon i{font-size: 2.2rem;}
		section .container .list li span{color: #606060;font-size: 1.6rem;}
		section .container .list li .info i{font-size: 2rem;display: none;opacity: 1;}
		section .container .list li i.fail{color: #fd0421;opacity: 0;}
		section .container .list li i.success{color: #5cb85c;display: none;}
		section .container .list li i.success.warning{color: #f0ad4e;}
		section .container .list li p.pictit{padding: .6rem 5%;background-color: #eaeaea;}
		section .container .list li .title{padding: 2% 5%;width: 90%;align-items: center;justify-content: space-between;}
		section .container .list li .title span{font-size: 1.4rem;}
		section .container .list li .title .look{font-size: 2.8rem;color: #007aff;}
		section .container .list li .upbox{align-items: center;flex-flow: column;text-align: center;}
		section .container .list li .uplabel{position: relative;padding: 2%;width: 40%;border: 1px dashed #007aff;overflow: hidden;height: 10rem;}
		section .container .list li .uplabel i{color: #c7c7c7;}
		section .container .list li .uplabel input{position: absolute;width: 100%;height: 100%;top: 0;left: 0;opacity: 0;z-index: 2;}
		section .container .list li .uplabel .loadingbox{position: absolute;background-color: #fff;width: 100%;height: 100%;z-index: 3;align-items: center;justify-content: center;top: 0;left: 0;}
		section .container .list li .uplabel .hide{display: none;}
		section .container .list li .uplabel .loadingbox span{font-size: 1rem;color: #333;}
		section .container .list li .uplabel .loading{width: 3rem;height: 3rem;border-top: .4rem solid rgba(0,0,0, 0.2);border-right: .4rem solid rgba(0,0,0, 0.2);border-bottom: .4rem solid rgba(0,0,0, 0.2);border-left: .4rem solid #ffffff;border-radius: 50%;position: absolute;top: 50%;left: 50%;margin: -1.9rem 0 0 -1.9rem;}
		section .container .list li .uplabel .animation{animation: loading 1s infinite linear;}
		section .container .list li .uplabel .showimg{position: absolute;width: 96%;height: 96%;top: 2%;left: 2%;background-color: #fff;display: none;}
		section .container .list li .uplabel .showimg img{filter: blur(3px);position: relative;top: 0;left: 0;}
		section .container .list li .uplabel .up{padding-bottom: .8rem;}
		section .container .list li .uplabel .up.warning{font-weight: bold;color: #f0ad4e;}
		section .container .list li .uplabel .up.wait{color: #5cb85c;}
		section .container .list li .uplabel i{font-size: 6.6rem;}
		section .container .list li .uplabel i.wait{color: #5cb85c;}
		section .container .list li .imagename{padding: .6rem;line-height: 1.8rem;text-align: center;overflow: hidden;}
		section .container .list li .imagename a{display: none;;padding: .4rem 1rem;}
		section .container .list li .imagename a i{color:#fd0421;}
		section .container .list li .sonbox{-webkit-flex-flow: column;flex-flow: column;}
        ::-webkit-input-placeholder{color: #fd0421;}
    </style>
    <script src="/assets/js/jquery-3.1.1.min.js"></script>
</head>
<body>
	<!-- header start -->
    #@tabHead("实名认证",true)
    <!-- end header -->
	<div id="show-template" class="show-template trans">
		<div class="loading"></div>	
		<img src="" />
	</div>
	#@loadContainer()
   	<section id="app" class="visiblecon sectrans">
        <div class="container" id="uploadpage">
        	<p class="title">个人信息</p>
        	<ul class="list">
        		<form id="form" method="post" enctype='multipart/form-data'>
	        		<li class="b_bor">
						<label class="flexbox">
							<p>用户姓名：</p>
							<input class="yz flex" type="text" id="userName" name="userName">
						</label>
					</li>
	        		<li class="b_bor">
						<label class="flexbox">
							<p>身份证号：</p>
							<input class="yz flex" type="text" id="idNo" name="idNo">
						</label>
					</li>
					<li class="file b_bor">
						<p class="pictit">身份证照片：</p>
						<div class="sonbox flexbox">
							<div class="sontab" data-submit="false">
								<div class="title flexbox">
									<div class="icon">
										<i class="iconfont fail">&#xe602;</i>
										<i class="iconfont success showimg " style="display: none;">&#xe664;</i>
									</div>
									<span>正面</span>
									<i class="iconfont look ac" modelsrc="">&#xe623;</i>
								</div>
								<div class="upbox flexbox">
									<div class="uplabel">
										<div class="showimg">
											<img src="">
										</div>
										<div class="loadingbox flexbox hide">
											<span>0%</span>
											<div class="loading"></div>
										</div>
										<i class="iconfont">&#xe651;</i>
										<p class="up">点击上传</p>
										<input name="idCardPhoto_1" type="file" accept="image/jpg, image/jpeg, image/png, image/gif">
									</div>
								</div>
								<p class="imagename"><span></span><a href="javascript:;" class="abortbtn"><i class="iconfont"></i></a></p>
							</div>
						</div>
						<div class="sonbox flexbox">
							<div class="sontab" data-submit="false">
								<div class="title flexbox">
									<div class="icon">
										<i class="iconfont fail">&#xe602;</i>
										<i class="iconfont success showimg " style="display: none;">&#xe664;</i>
									</div>
									<span>反面</span>
									<i class="iconfont look ac" modelsrc="">&#xe623;</i>
								</div>
								<div class="upbox flexbox">
									<div class="uplabel">
										<div class="showimg">
											<img src="">
										</div>
										<div class="loadingbox flexbox hide">
											<span>0%</span>
											<div class="loading"></div>
										</div>
										<i class="iconfont">&#xe651;</i>
										<p class="up">点击上传</p>
										<input name="idCardPhoto_2" type="file" accept="image/jpg, image/jpeg, image/png, image/gif">
									</div>
								</div>
								<p class="imagename"><span></span><a href="javascript:;" class="abortbtn"><i class="iconfont"></i></a></p>
							</div>
						</div>
					</li>
        		</form>
        	</ul>
        	<a class="submit" id="submit">提交</a>
        </div>
    </section>

    <!-- footer start -->
	#--#@footer(2)--#
	<!-- end footer -->
	
    <script src="/assets/js/fastclick.min.js"></script>
    <script src="/assets/js/xxsg.js"></script>
    <script>
    	$(function(){
    		
    		$.ajax({
    			type:'get',
    			url:'/userCenter/getMyInfo',
    			success:function(data){
    				console.log(data);
    				if(data.userName!=''){
    					$('#userName').val(data.userName)
    				}
    				if(data.idNo!=''){
    					$('#idNo').val(data.idNo)
    				}
    				if(data.idCardPhoto!=''){
    					if(data.idCardPhoto.length>0){
    						/* .attr("imgsrc",result.src) */
    						$(".sontab").data("submit",true);
    						$(".sontab").find("div.icon").children(".fail").hide().siblings(".success").show().removeClass("warning");
    						$(".sontab").find("p.up").removeClass("warning").addClass("wait").text("上传成功");
    						$(".sontab").find("p.up").siblings("i").addClass("wait").html("&#xe666;");
    					}else{
        					var idCardPhotoNameEnd= data.idCardPhoto.indexOf('.');
        					var idCardPhotoNo = data.idCardPhoto.substring(idCardPhotoNameEnd-1,idCardPhotoNameEnd);
    					}
    				}
    				if(data.descMsg!=''){
    					$(".sontab").find("p.up").removeClass("warning").addClass("wait").text(data.descMsg).css({color:'#F0AD4E'});
						$(".sontab").find("p.up").siblings("i").addClass("wait").html("&#xe618;").css({color:'#F0AD4E'});
    				}
    				
    			}
    		})
    		
    		
    		
    		
    		
    		var form = $("#form");
   			if(_x.isAndroid()){
   				accept = "image/*"
   				form.find("input[type=file]").each(function(){
   					$(this).attr("accept",accept)
   				})
   			}
    		
    		
            
            function showSuc(){
    			$("#app").removeClass("visiblecon");
    			$("#load-container").removeClass("load7");
        	}
            showSuc()
            
            /*function getBaseTab(datas,callback){
				var html = "",
					isMarry = true;
				datas.forEach(function(data){
					if(data.zhExpl == "级别")return;
					var inputType = data.inputType,
						isReadOnly = "",
						val = data.value,
						input = "",
						type = "";
					if(data.readOnly == "true" || !_x.isEmpty(val)){
						isReadOnly = "readonly='readonly'";
					}
					
					if(_x.isEmpty(val)){
						val = "";
					}
					
					if(inputType != "pic"){
						if(_x.isEmpty(inputType)){
							type = "text";
						}else if(inputType == "number"){
							type = "tel";
						}		
						
						input = "<input class='yz' type='"+ type +"' class='flex' id='"+ data.paramterName +"' name='"+ data.paramterName +"' "+ isReadOnly +" value='"+ val +"'  />";
						
						if(!_x.isEmpty(data.selectValue)){
							if(_x.isEmpty(val)){
								var select = data.selectValue.split(",");
								input = "<select id='"+ data.paramterName +"' name='"+ data.paramterName +"' class='yz flex'><option value=''>--请选择--</option>";
								select.forEach(function(sel){
									input += "<option value="+ sel +">"+ sel +"</option>";
								})
								input += "</select>";
							}else{
								input = "<input class='yz' type='text' class='flex' id='"+ data.paramterName +"' name='"+ data.paramterName +"' readonly='readonly' value='"+ val +"'  />";
								if(val != "已婚"){
									isMarry = false;
								}
							}
						}
						
						if(!isMarry && (data.zhExpl == "配偶姓名" || data.zhExpl == "配偶电话")){
							return false;
						}
						html = "<li class='b_bor'>"+
			        		    "	<label class='flexbox'>"+
			     			    "		<p>"+ data.zhExpl +"：</p>"+
			     			   			input+
			     			    "	</label>"+
			     			    "</li>";
					}else{
						if(data.baseTab == "头像")return;
						var sonTab = data.sonTab.split(","),
							sucIconStyle = "",
		           			failIconStyle = "",
		           			submit = false,
		           			sucIconSrc = "",
		           			err = "<i class='iconfont'>&#xe651;</i><p class='up'>点击上传</p>",
		           			warningClass = "";
		           		if(!_x.isEmpty(data.state)){
		           			var state = parseInt(data.state[modelIndex]);
		           			if(state > 0){
		           				sucIconStyle = "style='display: inline;'";
		           				failIconStyle = "style='display: none;'";
		           				sucIconSrc = "imgsrc='"+ data.value[modelIndex] +"'";
		           			}
		           			if(state == 1){//图片已上传，并且可以修改
		           				submit = true;
		           			}else if(state == 2){//审核通过，不能修改
		           				submit = true;
		           				form = "";
		           				err = "<i class='iconfont wait'>&#xe666;</i><p class='up wait'>上传成功</p>";
		           			}else if(state == 3){//重新上传图片
		           				err = "<i class='iconfont'>&#xe651;</i><p class='up warning'>"+ data.errs[modelIndex] +"</p>";
		           				warningClass = "warning";
		           				submit = false;
		           			}
		           		}
		           		html = "<li class='file b_bor'>"+
		           				"	<p class='pictit'>"+ data.zhExpl +"：</p>"+
		           				"   <div class='sonbox flexbox'>";
			     			    
						sonTab.forEach(function(son,sonIndex){
							var spanDom = "<span>"+ sonTab[sonIndex] + "</span>";
							if(!isNaN(son)){
			           			spanDom = "<span>"+ data.zhExpl + (sonIndex + 1) +"</span>";
			           		}
							
							if(sonTab.length == 1)spanDom = "<span>"+ data.zhExpl +"</span>";
							
							html += "<div class='sontab' data-submit="+ submit +">"+	
			                        "	<div class='title flexbox'>"+
				                    "		 <div class='icon'>"+
				                    "			<i class='iconfont fail' "+ failIconStyle +">&#xe602;</i>"+
				                    "			<i class='iconfont success showimg "+ warningClass +"' "+ sucIconStyle +" "+ sucIconSrc +">&#xe664;</i>"+
				                    "        </div>"+
				                    		 spanDom+
				                    "        <i class='iconfont look ac' modelsrc=''>&#xe623;</i>"+
				                    "	</div>"+
				                    "   <div class='upbox flexbox'>"+
				                    "		<div class='uplabel'>"+
				                    "           <div class='showimg'>"+
				                    "				<img src='' />"+
				                    "           </div>"+
				                    "           <div class='loadingbox flexbox hide'>"+
				                    "           	<div class='loading'></div>"+
				                    "           </div>"+
				                   	 			err+
				                   	" 			<input name='"+ data.paramterName +"_"+ (sonIndex + 1) +"' type='file' accept='"+ accept +"' />"+
				                   	"		</div>"+	
				                    "   </div>"+
				                    "   <p class='imagename'>"+
				                    "		<span></span><a href='javascript:;' class='abortbtn'><i class='iconfont'>&#xe62d;</i></a>"+
				                    "   </p>"+
				                    "</div>";
						})
						html += "</div></li>";
					}
					form.append(html);
					
					if(datas.length - 4 == form.children("li").length){
						callback();
					}
				});
			}*/
			
			//上传控件
            form.on("change","input[type=file]",function(){
            	var that = $(this),
                	files = that[0].files[0];
                if(files){ 
                    var name = files.name.substring(files.name.indexOf("."));
                    //验证格式
                    if(!_x.isImage(name)){
                        _x.showTip("请上传图片，格式为jpg/jpeg/png/gif");
                        that.val("");
                        return false;
                    }
                    //验证大小
                    if(files.size > 10485760){
                        _x.showTip("图片大小超出限制");
                        that.val("");
                        return false;
                    }
                    //显示名字和大小
                    that.parents(".upbox").siblings(".imagename").children("span").text(files.name + "（"+ _x.bytesTosize(files.size) +"）").siblings("a").css("display","inline-block");
                    that.siblings(".loadingbox").removeClass("hide").children("div").addClass("animation"); 
                    
                    //return;
                    upload_file(files,that);
                }
            });
			
          	//上传
            function upload_file(file,fileDom){
                var xhr = new XMLHttpRequest(),
                    formData = new FormData(),
                    nowSontab = fileDom.parents(".sontab");
                formData.append(fileDom.attr("name"),file);
                xhr.open("post","/userCenter/submitFile",true);
                xhr.addEventListener("load",function(){
                    var result = JSON.parse(this.response);
                    fileDom.siblings(".loadingbox").addClass("hide").children("div").removeClass("animation");
                    console.log("success--->"+result)
                    nowSontab.data("submit",true);
                    nowSontab.find("div.icon").children(".fail").hide().siblings(".success").show().attr("imgsrc",result.src).removeClass("warning");
                    nowSontab.find("p.up").removeClass("warning").addClass("wait").text("上传成功").css({color:'#449D44'});
                    nowSontab.find("p.up").siblings("i").addClass("wait").html("&#xe666;").css({color:'#449D44'});
                    /* 1成功 0失败  src图片路径 */

                });

                xhr.upload.addEventListener('progress',function(e){//监听XMLHttpRequest对象的progress事件，读取完毕后触发
                    if(e.lengthComputable){//是否可以计算上传字节数
                        var percent = parseInt(e.loaded / e.total * 100); 
                        fileDom.siblings(".loadingbox").children("span").text(percent + "%")
                        console.log(percent)
                    };
                });
                
                var imagenameDom = fileDom.parents(".upbox").siblings(".imagename");
                             
                /*imagenameDom.children(".abortbtn").click(function(){
                	//终止上传
                	xhr.abort();               	
                	ajaxError(fileDom,reader,imagenameDom);
                	nowSontab.data("submit",false);
	                nowSontab.find("div.icon").children(".success").removeAttr("imgsrc").hide().siblings(".fail").show().css("opacity",1);
                });*/
                
                xhr.addEventListener('error',function(e){//监听XMLHttpRequest对象的progress事件，读取完毕后触发
                	ajaxError(fileDom,imagenameDom,"上传失败,请检查您的网络！");
                });
                
                xhr.send(formData);
            };
           
           //ajax错误处理 
           function ajaxError(fileDom,imagenameDom,tip){
           		_x.showTip(tip);
           		imagenameDom.children("span").text("").siblings(".abortbtn").hide();
           		fileDom.siblings(".loadingbox").addClass("hide").siblings(".showimg").hide().children("img").attr("src","");
                fileDom.val("");
           };
           
         	//模板展示
        	var templateDom = $("#show-template"),
        		$win_Width = $(window).width(),
        		$win_Height = $(window).height(),
        		templateImg = null;
        	templateDom.on("touchmove",function(e){
        		e.preventDefault();
        	});
        	//关闭
        	templateDom.on("click",function(e){
        		templateImg = null;
        		$(this).removeClass("visible");
        		$(this).children(".loading").removeClass("animatie").hide();
        	});
        	templateDom.on("transitionend",function(){
        		if(!$(this).hasClass("visible")){
        			$(this).children("img").attr("src","").removeClass("show");
        		}
       		})
        	 //显示
	         form.on("click","i.look",function(){
	         	var src = $(this).attr("modelsrc");
	         	if(_x.isEmpty(src)){
	         		_x.showTip("暂无模板！");
	         		return;
	         	}
	         	templateDom.addClass("visible");
	         	templateDom.children(".loading").addClass("animatie").show();
	         	templateImg = new Image();
	         	templateImg.src = src;
	         	templateImg.onload = function(){
	         		var imgW = this.width,
	         			imgH = this.height,
	         			data = _x.imgFormat(imgW,imgH,$win_Width,$win_Height);
	         		templateDom.children("img").attr("src",src).css({
	         			"width":data.imgWidth,
	         			"height":data.imgHeight,
	         			"margin-left": - data.imgWidth / 2,
	         			"margin-top": - data.imgHeight / 2
	         		}).addClass("show");
	         	}
	         });
        	
        	form.on("blur","input.yz",blurYz);       	
        	
        	form.on("change","#marriage",function(){
        		if($(this).val() == "已婚"){
        			$("#spouseName").addClass("yz").parents("li").show();
        			$("#spousePhone").addClass("yz").parents("li").show();
        		}else{
        			$("#spouseName").removeClass("yz").parents("li").hide();
        			$("#spousePhone").removeClass("yz").parents("li").hide();
        		}
        	})
        	
        	//输入框验证
        	function blurYz(){
        		var that = $(this),
        			val = that.val();
        		if(_x.isEmpty(val)){
        			that.attr("placeholder","此项不能为空！");
        			return false;
        		}
        		
        		if(that.attr("type") == "tel"){
        			if(isNaN(val) || val.indexOf(".") != -1){
        				that.val("");
        				that.attr("placeholder","请输入数字！");
            			return false;
        			}
        		}
        	}
        	
        	//提交
        	var isSubmit = true;
        	$("#submit").click(function(){
        		if(!isSubmit)return
            	isSubmit = false;
        		var mark = true,
        			firstErrDom = null,
        			data = {};
        		//表单验证
        		form.find(".yz").each(function(){
        			var that = $(this),
        				val = that.val(),
        				paramterName = that.attr("name");
        			if(that.attr("readonly") == "readonly")return;
        			if(_x.isEmpty(val)){
            			that.attr("placeholder","此项不能为空！");
            			mark = false;
            			if(_x.isEmpty(firstErrDom))firstErrDom = that.parents("li");
            		}
            		
            		if(that.attr("name") == "idNo"){
            			if(!_x.isEmpty(val) && !/(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val)){
            				that.val("");
    						that.attr("placeholder","身份证号码无效！");
    						mark = false;
            				if(_x.isEmpty(firstErrDom))firstErrDom = that.parents("li");
    					}
            		}
            		data[paramterName] = val;
            		
        		})
        		
        		//上传验证
        		form.find(".sontab").each(function(){
        			if(!$(this).data("submit")){
        				mark = false;
            			if(_x.isEmpty(firstErrDom))firstErrDom = $(this).parents("li");
            			$(this).find("div.icon").children(".success").removeAttr("imgsrc").hide().siblings(".fail").show().css("opacity",1);
        			}
        		})
        		
        		if(!_x.isEmpty(firstErrDom))$("html,body").animate({"scrollTop":firstErrDom.offset().top})
        		if(mark){
        			$("#submit").html("<div class='textloading'></div>")
        			if(_x.isEmptyObj(data)){
        				_x.showTip("提交成功！",{url: "/userCenter"});
						window.location.href = "/userCenter";
        			}else{
	        			$.ajax({
	        				type:"post",
	        				url:"/userCenter/submit",
	        				dataType:"json",
	        				data:data,
	        				success:function(data){
	        					if(data.code == 1){
	        						_x.showTip("提交成功！",{url: "/userCenter"});
	        					}else{
	        						_x.showTip("提交失败，请稍后重试！");
	        						isSubmit = true
	        						$("#submit").html("提交")
	        					}
	        				},
	        				error:function(){
	        					_x.showTip("提交失败，请检查您的网络！");
	        					isSubmit = true
	        					$("#submit").html("提交")
	        				}
	        			});
        			}
        			console.log(data)
        		}else{
        			isSubmit = true
        			$("#submit").html("提交")
        		}
        	})
        	
        	//显示上传的图片
           	form.on("click","i.showimg",function(){
            	var src= $(this).attr("imgsrc");
            	if(_x.isEmpty(src))return;
            	templateDom.addClass("visible");
            	templateDom.children(".loading").addClass("animatie").show();
            	templateImg = new Image();
            	templateImg.src = src;
            	templateImg.onload = function(){
            		var imgW = this.width,
            			imgH = this.height,
            			data = _x.imgFormat(imgW,imgH,$win_Width,$win_Height);
            		templateDom.children("img").attr("src",src).css({
            			"width":data.imgWidth,
            			"height":data.imgHeight,
            			"margin-left": - data.imgWidth / 2,
            			"margin-top": - data.imgHeight / 2
            		}).addClass("show");
            	}
            });
        	
    	});
    </script>
    </body>
</html>